import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const InputTestScreen: React.FC = () => {
  const colors = useThemeColors();

  const styles = StyleSheet.create({
    section: { marginBottom: 20 },
    card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
    row: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12 },
    col: { gap: 12 },
    borderedRow: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12, borderWidth: 1, borderColor: colors.border, padding: 8 },
  });

  // 受控示例状态
  const [username, setUsername] = useState<string>('');
  const [email, setEmail] = useState<string>('demo@example.com');
  const [lastIconPress, setLastIconPress] = useState<string>('暂无');
  const [focusState, setFocusState] = useState<string>('未聚焦');

  return (
    <Layout.Page
      headerShown
      headerProps={{ title: 'Input 测试', backVisible: true }}
      padding={16}
      scrollable
      testID="InputTestScreen"
    >
      {/* 基础用法：受控/非受控 + placeholder */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础用法</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>受控与非受控输入，包含占位符</UI.Text>
          <View style={styles.col}>
            <UI.Input
              value={username}
              placeholder="请输入用户名"
              onChangeText={setUsername}
              testID="input-basic-controlled-username"
            />
            <UI.Input
              defaultValue="非受控初始值"
              placeholder="非受控示例"
              testID="input-basic-uncontrolled"
            />
            <UI.Text variant="body1" color="textSecondary">当前用户名：{username || '（空）'}</UI.Text>
          </View>
        </Layout.Card>
      </View>

      {/* 状态：安全输入/禁用/仅不可编辑 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>状态</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>安全输入、禁用、不可编辑（但非禁用）</UI.Text>
          <View style={styles.row}>
            <UI.Input placeholder="密码" secureTextEntry testID="input-state-secure" />
            <UI.Input placeholder="禁用输入" disabled testID="input-state-disabled" />
            <UI.Input placeholder="不可编辑（editable=false）" editable={false} testID="input-state-not-editable" />
          </View>
        </Layout.Card>
      </View>

      {/* 错误与帮助文本 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>错误与帮助文本</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>error 切换边框色；helperText 显示提示信息</UI.Text>
          <View style={styles.row}>
            <UI.Input placeholder="邮箱" error helperText="邮箱格式不正确" testID="input-error-helper" />
            <UI.Input placeholder="昵称" helperText="昵称将显示在个人页" testID="input-helper" />
          </View>
        </Layout.Card>
      </View>

      {/* 尺寸与变体：size + variant */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>尺寸与变体</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>size: xs/sm/md/lg/xl；variant: solid/outline/ghost</UI.Text>
          <View style={styles.row}>
            <UI.Input placeholder="XS + outline" size="xs" variant="outline" testID="input-size-xs-outline" />
            <UI.Input placeholder="SM + solid" size="sm" variant="solid" testID="input-size-sm-solid" />
            <UI.Input placeholder="MD + ghost" size="md" variant="ghost" testID="input-size-md-ghost" />
            <UI.Input placeholder="LG + outline" size="lg" variant="outline" testID="input-size-lg-outline" />
            <UI.Input placeholder="XL + solid" size="xl" variant="solid" testID="input-size-xl-solid" />
          </View>
        </Layout.Card>
      </View>

      {/* 颜色：icon 颜色影响（主题与自定义） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>颜色（图标）</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>color 影响左右图标颜色（主题预设与自定义）</UI.Text>
          <View style={styles.row}>
            <UI.Input placeholder="主色图标" color="primary" leftIcon={{ name: 'person' }} rightIcon={{ name: 'checkmark' }} testID="input-color-primary-icons" />
            <UI.Input placeholder="副色图标" color="secondary" leftIcon={{ name: 'mail' }} rightIcon={{ name: 'paper-plane' }} testID="input-color-secondary-icons" />
            <UI.Input placeholder="成功色图标" color="success" leftIcon={{ name: 'checkmark-circle' }} rightIcon={{ name: 'shield-checkmark' }} testID="input-color-success-icons" />
            <UI.Input placeholder="自定义色图标" color="#FF5722" leftIcon={{ name: 'flame' }} rightIcon={{ name: 'aperture' }} testID="input-color-custom-icons" />
          </View>
        </Layout.Card>
      </View>

      {/* 宽度与布局：fullWidth / flex */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>宽度与布局</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>fullWidth 占满容器；flex 行内自适应伸展</UI.Text>
          <View style={styles.col}>
            <UI.Input placeholder="Full Width" fullWidth testID="input-fullwidth" />
            <View style={[styles.row, { width: '100%' }]}>
              <UI.Input placeholder="flex=1" flex={1} testID="input-flex-1" />
              <UI.Input placeholder="flex=2" flex={2} testID="input-flex-2" />
            </View>
          </View>
        </Layout.Card>
      </View>

      {/* 左右图标与点击：leftIcon/rightIcon.onPress */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>图标与点击</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>右侧图标支持点击事件</UI.Text>
          <UI.Text variant="body1" color="textSecondary" mb={8}>最近图标点击：{lastIconPress}</UI.Text>
          <View style={styles.row}>
            <UI.Input
              placeholder="带左/右图标"
              leftIcon={{ name: 'search' }}
              rightIcon={{ name: 'close', onPress: () => setLastIconPress('close') }}
              testID="input-icons-with-right-onpress"
            />
            <UI.Input
              placeholder="明确 type=ionicons"
              leftIcon={{ name: 'call', type: 'ionicons' }}
              rightIcon={{ name: 'call-outline', type: 'ionicons', onPress: () => setLastIconPress('call-outline') }}
              testID="input-icons-ionicons"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 文本样式：inputStyle */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>文本样式</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>inputStyle 自定义字体大小/颜色等</UI.Text>
          <View style={styles.row}>
            <UI.Input placeholder="大号文字" inputStyle={{ fontSize: 18 }} testID="input-style-fontsize-18" />
            <UI.Input placeholder="次要色文字" inputStyle={{ color: colors.textSecondary }} testID="input-style-textsecondary" />
          </View>
        </Layout.Card>
      </View>

      {/* 键盘与提交：keyboardType/returnKeyType/autoCapitalize/onFocus/onBlur */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>键盘与交互</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>设置键盘类型、返回键类型、自动大写，监听焦点</UI.Text>
          <UI.Text variant="body1" color="textSecondary" mb={8}>焦点状态：{focusState}</UI.Text>
          <View style={styles.row}>
            <UI.Input
              value={email}
              onChangeText={setEmail}
              placeholder="邮箱输入"
              keyboardType="email-address"
              returnKeyType="done"
              autoCapitalize="none"
              onFocus={() => setFocusState('聚焦')}
              onBlur={() => setFocusState('失焦')}
              testID="input-keyboard-email"
            />
            <UI.Input
              placeholder="数字输入"
              keyboardType="numeric"
              returnKeyType="search"
              autoCapitalize="characters"
              testID="input-keyboard-numeric"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 间距：SpacingProps（m/p/mh/mv/ph/pv） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>间距</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>展示 m/mh/mv/p/ph/pv</UI.Text>
          <View style={styles.borderedRow}>
            <UI.Input placeholder="m=8" m={8} testID="input-spacing-m-8" />
            <UI.Input placeholder="mh=12" mh={12} testID="input-spacing-mh-12" />
            <UI.Input placeholder="mv=12" mv={12} testID="input-spacing-mv-12" />
            <UI.Input placeholder="p=8" p={8} testID="input-spacing-p-8" />
            <UI.Input placeholder="ph=12" ph={12} testID="input-spacing-ph-12" />
            <UI.Input placeholder="pv=12" pv={12} testID="input-spacing-pv-12" />
          </View>
        </Layout.Card>
      </View>

      {/* 盒子样式：BoxProps（背景/边框/圆角/尺寸） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>盒子样式</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>通过 BoxProps 控制背景、边框、圆角、尺寸</UI.Text>
          <View style={styles.row}>
            <UI.Input
              placeholder="filled + 边框"
              variant="solid"
              backgroundColor={colors.surface}
              borderWidth={1}
              borderColor={colors.border}
              borderRadius={16}
              width={220}
              testID="input-box-filled-border"
            />
            <UI.Input
              placeholder="outline + 自定义边框"
              variant="outline"
              backgroundColor="transparent"
              borderWidth={2}
              borderColor="#90CAF9"
              borderRadius={20}
              width={240}
              testID="input-box-outline-border"
            />
            <UI.Input
              placeholder="ghost + 透明背景"
              variant="ghost"
              transparent
              width={200}
              testID="input-box-ghost-transparent"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 可达性：accessibilityLabel/Hint */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>可达性</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>自定义可达性标签与提示</UI.Text>
          <View style={styles.row}>
            <UI.Input
              placeholder="可达性输入"
              accessibilityLabel="用户名输入框"
              accessibilityHint="输入你的用户名"
              testID="input-accessibility"
            />
          </View>
        </Layout.Card>
      </View>
    </Layout.Page>
  );
};

export default InputTestScreen;